<template>
  <view class="category">
    <!-- 搜索部分 -->
    <ugo-search></ugo-search>
    <!-- 分类页面 -->
    <view class="main">    
    <!-- 左侧菜单栏 -->
      <view class="left">
        <view 
        class="item"
        :class="current===index?'active':''"
        v-for="(item,index) in leftTitle" :key="index" @click="changeItem(index)">
        {{ item }}
        </view>
      </view>
      <!-- 右侧内容部分 -->
      <view class="right">
        <view 
        class="goods-group"
        v-for="item in goods"
        :key="item.cat_id"
        >
          <!-- 标题 -->
          <view class="goods-group-title">{{item.cat_name}}</view>
          <!-- 内容 -->
          <view class="goods-group-list">
            <navigator 
            class="goods-item" 
            v-for="item2 in item.children" 
            :key="item2.cat_id"
            :url="`/pages/goods_list/goods_list?cid=${item2.cat_id}`"
            >
              <u-image :src="item2.cat_icon" width="120" height="120">
              </u-image>
              <view class="cat_name">{{item2.cat_name}}</view>
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: '',
  props: {},
  components: {
  },
  data() {
  return {
    // categoryList: [],
    leftTitle: [],
    goods: [],
    current: 0 // 索引
  };
  },
  // 计算属性
  computed: {
    // 对请求出来的数据做相应的改造
    // 左侧数据数组
    // leftTitle() {
    //   return this.categoryList.map(item => item.cat_name)
    // },
    // 右侧呢容数组
    // goods() {
    //   if (this.categoryList.length) {
    //     return this.categoryList[this.current].children
    //   } else {
    //     return []
    //   }
    // }
  },
  watch: {},
  onLoad() {
    // 获取页面数据资源
    this.getCategories()
  },
  created() {},
  mounted() {},
  methods: {
        // 获取页面的数据
    async getCategories() {
      this.categoryList = await this.$u.http.get('/categories')
      // 获取左侧数据
      this.leftTitle = this.categoryList.map(item => item.cat_name)
      // 获取右侧数据
      this.goods = this.categoryList[this.current].children
    },
    // 点击更改索引
    changeItem(index) {
      this.current = index
      // 拿到索引再次请求数据
      this.goods = this.categoryList[this.current].children
    }
  },
};
</script>
<style lang="scss">
.category {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .main {
    display: flex;
    flex: 1;
    overflow: hidden;
  }
}
  .left {
  width: 182rpx;
  overflow: auto;
  .item {
    height: 70rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #585858;
  }
  .active {
    color: $theme-color;
  }
}
.right {
  flex: 1;
  overflow: auto;
  .goods-group {
    .goods-group-title {
      height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .goods-group-list {
      display: flex;
      flex-wrap: wrap;
      .goods-item {
        width: 33.33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 10rpx;
      }
    }
  }
}

</style>